<template>
<<<<<<< shuo
	<view class="course">
    <Issue />
		<view>
			<!-- 头部选项卡 -->
			<view class="head-nav">
				<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">推荐</view>
				<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">关注</view>
			</view>
			<!-- 内容切换 -->
			<view class="content" v-if="navIndex==1">
				<view class="tuijian-box" v-for="(item,index) in tuijianList">
					<view class="tuijian-con">
						<view style="float: left;">
							<image class="tuijian-userimg" :src="item.userimg" mode=""></image>
						</view>
						<view style="float: left;margin-left: 10px;">
							<view>{{item.nickname}}</view>
							<view style="font-size: 12px;">{{item.time}}</view>
						</view>
						<view style="float: right;">
							<view style="line-height: 40px;font-size: 14px;" v-if="item.flag=='false'?true:false"
								@click="guanzhu(item)">
								<image style="width: 25px;height: 25px;margin-top: 8px;float: left;"
									src="../../static/guanzhu.png" mode="">
								</image>
								关注
							</view>
							<view style="line-height: 40px;font-size: 14px;" v-if="item.flag=='true'?true:false">
								已关注
							</view>
						</view>

					</view>
					<view class="tuijian-con2" v-html="item.content"></view>
					<view class="tuijian-con3">
						<view style="float: left;margin-right: 13px;">
							<image style="width: 100px;height: 90px;" :src="item.imgg" mode=""></image>
						</view>
						<view style="float: left;margin-right: 13px;">
							<image style="width: 100px;height: 90px;" :src="item.imgg2" mode=""></image>
						</view>
						<view style="float: left;">
							<image style="width: 100px;height: 90px;" :src="item.imgg3" mode=""></image>
						</view>
					</view>
					<view class="tuijian-con4">
						<view>
							<u-icon style="float: left;margin-top: 8px;" v-if="item.show=='false'?true:false" @click="genggai(item)"
								name="heart" color="#333" size="28"></u-icon>
							<u-icon style="float: left;margin-top: 8px;" v-if="item.show=='true'?true:false" @click="genggai2(item)"
								name="heart-fill" color="red" size="28"></u-icon>
							<span style="line-height: 30px;">{{item.dianzan}}</span>
						</view>
						<view>
							<u-icon style="float: left;margin-top: 8px;" name="more-circle" color="#333" size="28"></u-icon>
							<span style="line-height: 30px;">{{item.pinglun}}</span>
						</view>
						<view>
							<u-icon style="float: left;margin-top: 8px;" name="share" color="#333" size="28"></u-icon>
							<span style="line-height: 30px;">{{item.zhuanfa}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==2">
				<view class="tuijian-box" style="height: 390px;" v-for="(item,index) in guanzhuList">
					<view class="tuijian-con">
						<view style="float: left;">
							<image class="tuijian-userimg" :src="item.userimg" mode=""></image>
						</view>
						<view style="float: left;margin-left: 10px;">
							<view>{{item.nickname}}</view>
							<view style="font-size: 12px;">{{item.time}}</view>
						</view>
					</view>
					<view class="tuijian-con2" style="font-size: 16px;" v-html="item.content"></view>
					<view class="tuijian-con3">
						<view style="float: left;margin-right: 13px;">
							<image style="width: 325px;height: 180px;" :src="item.imgg" mode=""></image>
						</view>
					</view>
					<view class="tuijian-con4">
						<view>
							<u-icon style="float: left;margin-top: 8px;" v-if="item.show=='false'?true:false" @click="genggai(item)"
								name="heart" color="#333" size="28"></u-icon>
							<u-icon style="float: left;margin-top: 8px;" v-if="item.show=='true'?true:false" @click="genggai2(item)"
								name="heart-fill" color="red" size="28"></u-icon>
							<span style="line-height: 30px;">{{item.dianzan}}</span>
						</view>
						<view>
							<u-icon style="float: left;margin-top: 8px;" name="more-circle" color="#333" size="28"></u-icon>
							<span style="line-height: 30px;">{{item.pinglun}}</span>
						</view>
						<view>
							<u-icon style="float: left;margin-top: 8px;" name="share" color="#333" size="28"></u-icon>
							<span style="line-height: 30px;">{{item.zhuanfa}}</span>
						</view>
					</view>
					<view class="pinglun-box">
						<view>
							<image style="width: 20px;height: 20px;border-radius: 50%;float: left;" :src="item.user2img"
								mode=""></image>
							<span style="font-size: 12px;margin-left: 10px;">{{item.user2}}</span>
						</view>
						<view style="margin-top: 3px;">
							<image style="width: 20px;height: 20px;border-radius: 50%;float: left;" :src="item.user3img"
								mode=""></image>
							<span style="font-size: 12px;margin-left: 10px;">{{item.user3}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Issue from "../../components/issue/issue.vue";
<<<<<<< shuo
	import {
		Getnewlist,
		Putnewlist
	} from '../../api/index.js'
	export default {
		name: 'course',
		components: {
			Issue,
		},
		data() {
			return {
				navIndex: 1,
				navList: ["选项卡一", "选项卡二"],
				listIndex: 0,
				tuijianList: [],
				text: "",
				name: "",
				flag: true,
				guanzhuList: []
			}
		},
		computed: {},
		methods: {
			guanzhu(item) {
				item.flag = "true"
				// Putshiquanlist(item).then(res => {
				// 	console.log(res);
				// })
				console.log(item);
				// addGuanzhu({
				// 	username: item.nickname,
				// 	text: "博主还没有介绍自己~",
				// 	image: item.userimg
				// }).then(res => {
				// 	console.log(res);
				// })
				// console.log(item);
				// addGuanzhu({
				// 	nickname: item.nickname,
				// 	content: item.name,
				// 	imgg: item.imgg,
				// 	userimg: item.userimg,
				// 	show: "false",
				// 	dianzan: item.dianzan,
				// 	pinglun: item.pinglun,
				// 	zhuanfa: item.zhuanfa
				// }).then(res => {
				// 	console.log(res);
				// 	GetGuanzhuList().then(res => {
				// 		console.log(res.data);
				// 		this.guanzhuList = res.data
				// 	})
				// })
				Putnewlist({
					id:item.id,
					nickname: item.nickname,
					content: item.name,
					imgg: item.imgg,
					imgg2: item.imgg2,
					imgg3: item.imgg3,
					userimg: item.userimg,
					name: item.name,
					time: item.time,
					show: "false",
					flag: "true",
					dianzan: item.dianzan,
					pinglun: item.pinglun,
					zhuanfa: item.zhuanfa
				}).then(res => {
					console.log(res);
					Getnewlist().then(res=>{
						this.tuijianList = res.data
						this.guanzhuList = res.data.filter(item=> item.flag == 'true')
					})
				})

			},
			genggai(item) {
				console.log(111);
				item.show = "true"
				item.dianzan = "" + (Number(item.dianzan) + 1)
				Putnewlist(item).then(res => {
					console.log(res);
					// Getshiquanlist().then(res => {
					// 	this.tuijianList = res.data
					// })
					
					
					Getnewlist().then(res=>{
						this.tuijianList = res.data
						this.guanzhuList = res.data.filter(item=> item.flag == 'true')
					})
				})
				// Putguanzhulist(item).then(res => {
				// 	console.log(res);
				// 	GetGuanzhuList().then(res => {
				// 		this.guanzhuList = res.data
				// 	})
				// })
				// addDianzan({
				// 	name: item.name,
				// 	username: item.nickname,
				// 	liulan: Math.floor(Math.random() * 10000),
				// 	image: item.imgg,
				// 	userImg: item.userimg
				// }).then(res => {
				// 	console.log(res);
				// })
			},
			genggai2(item) {
				console.log(222);
				item.show = "false"
				item.dianzan = "" + (Number(item.dianzan) - 1)
				Putnewlist(item).then(res => {
					console.log(res);
					// Getshiquanlist().then(res => {
					// 	this.tuijianList = res.data
					// })
					
					
					Getnewlist().then(res=>{
						this.tuijianList = res.data
						this.guanzhuList = res.data.filter(item=> item.flag == 'true')
					})
				})
				// Putguanzhulist(item).then(res => {
				// 	console.log(res);
				// 	GetGuanzhuList().then(res => {
				// 		this.guanzhuList = res.data
				// 	})
				// })
				// // console.log(item.id);
				// Getdianzan().then(res => {
				// 	res.data.map(items => {
				// 		if (item.name == items.name) {
				// 			console.log(items.id);
				// 			delDianzan(items.id).then(res => {
				// 				console.log(res);
				// 			})
				// 		}
				// 		return items
				// 	})
				// })
			},
			checkIndex(index) {
				this.navIndex = index;
			},
			checkListIndex(index) {
				this.listIndex = index;
			},
		},
		onShow() {
			uni.$emit("page", {
				show: false
			});
			// Getshiquanlist().then(res => {
			// 	console.log(res.data);
			// 	res.data.map(item => {
			// 		item.content = item.content.replace(" ", "<br/>")
			// 	})
			// 	this.tuijianList = res.data
			// })
			// GetGuanzhuList().then(res => {
			// 	console.log(res.data);
			// 	this.guanzhuList = res.data
			// }),
			Getnewlist().then(res=>{
				this.tuijianList = res.data
				this.guanzhuList = res.data.filter(item=> item.flag == 'true')
			})
		}
	}
</script>

<style></style>
